<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .big{width: 300px; height: 20px; border: 1px solid rgb(11, 75, 3); }
    .small{width: 0; height: 20px; background-color: pink;}
</style>

<div class="big">
    <div class="small" style="width: 0px;"> </div></div>

   
    

<input type="button" class="start" value="上传">
    <input type="button" class="stop" value="暂停">
    <input type="button" class="continue" value="继续">
    <input type="button" class="zero" value="清空">
<body>

    <script>
        var timer;
        var bigDom = document.querySelector('.big');
        var smallDom = document.querySelector('.small');
        // 开始上传
        document.querySelector('.start').onclick = function(){
            go();
           
        }
        // 暂停
        document.querySelector('.stop').onclick = function(){
            clearInterval(timer)
        }
        // 继续
        document.querySelector('.continue').onclick = function(){
            go();
        }
        // 继续
        document.querySelector('.zero').onclick = function(){
            clearInterval(timer);
            // 重置宽度
            smallDom.style.width = 0;
        }
    
        // 封装函数实现进度条的走动
        function go(){
            clearInterval(timer)
        // 获取到big的宽度 获取到的样式是携带px单位
        var bigWidth =  parseInt(window.getComputedStyle(bigDom).width);
        timer = setInterval(function(){
            // 判断现在small的宽度是否到达终点
            var nowWidth = parseInt(window.getComputedStyle(smallDom).width)
            if(nowWidth>=bigWidth){
                clearInterval(timer)
            }else{
                smallDom.style.width = nowWidth + 5 +'px'
            }
        },50)
    }
    </script>
</body>
</html>